<!-- 起床 -->
<template>
  <div class="getUp-container">
    <RecordFilter @headleSubmit="headleSubmit"></RecordFilter>
    <Record
      :Loading="isLoadingRef"
      :tableData="getupListDataRef ? getupListDataRef.rows : []"
      :total="getupListDataRef ? getupListDataRef.total : 0"
      :fieldData="fieldDataRef"
      :page="pageRef"
      @currentChange="currentChange"
    ></Record>
  </div>
</template>

<script setup>
import { ref } from "vue";
import RecordFilter from "../components/RecordFilter.vue";
import Record from "../components/Record.vue";
import { getup } from "@/api/student.js";
const getupListDataRef = ref(); // 起床记录的数据
const pageRef = ref(1); // 页码
const conditionRef = ref(); // 条件对象
const isLoadingRef = ref(false) // 加载
const fieldDataRef = ref([
  {
    prop: "studentName",
    label: "姓名",
  },
  {
    prop: "studentID",
    label: "学号",
  },
  {
    prop: "dormitory",
    label: "宿舍楼",
  },
  {
    prop: "floor",
    label: "楼层",
  },
  {
    prop: "room",
    label: "宿舍号",
  },
  {
    prop: "time",
    label: "日期",
    type: "time",
  },
  {
    label: "是否早起",
    type: "state",
    prop: "isGetUp",
  },
]);
// 获取远程数据
const getUpListData = async (item) => {
  const { data } = await getup({
    page: pageRef.value,
    limit: 5,
    startingTime: item.originTime,
    endTime: item.endTime,
    studentId: item.selStudent,
  });
  getupListDataRef.value = data;
  for (const key in getupListDataRef.value.rows) {
    getupListDataRef.value.rows[key].dormitory =
      item.dormitoryData[0].DormitoryName;
    getupListDataRef.value.rows[key].floor = item.floorData[0].floorNumber;
    getupListDataRef.value.rows[key].room = item.roomData[0].roomNo;
  }
};

const headleSubmit = async (item) => {
  isLoadingRef.value = true;
  pageRef.value = 1;
  conditionRef.value = item;
  await getUpListData(item);
  isLoadingRef.value = false;
};
const currentChange = async (page) => {
  isLoadingRef.value = true;
  pageRef.value = page;
  await getUpListData(conditionRef.value);
  isLoadingRef.value = false;
};
</script>

<style lang="less" scoped>
.getUp-container {
  width: 100%;
  height: 100%;
}
</style>